<template>
    <div id="apparea" class="transdetail anipage">
        <pageheader :showback="false" :fixed="false">
            <template slot="title">
                <p class="nav_slot"><span>{{'单号 : '+(detailinfo.so?detailinfo.so:'')}}</span></p>
            </template>
            <template slot="left">
                <p class="nav_slot" @click="goback"><van-icon class="vanicon" name="arrow-left" /><span>返回</span></p>
            </template>
        </pageheader>
        <div class="tabbars">
            <van-tabs v-model="active" animated @click="ontabClick">
                <van-tab title="托运详情">
                    <div class="detailinfo">
                        <div class="info-wrap">
                            <div class="info-item flexbox">
                                <div class="flex_item infotitle">
                                    <vname :name="'时间'"></vname>:
                                </div>
                                <div class="flex4 infovalue">
                                    <span>{{detailinfo.dateofPlan}}</span>
                                </div>
                            </div>
                            <div class="info-item flexbox">
                                <div class="flex_item infotitle">
                                    单号:
                                </div>
                                <div class="flex4 infovalue">
                                    <span>{{detailinfo.so}}</span>
                                </div>
                            </div>
                            <div class="info-item flexbox">
                                <div class="flex_item infotitle">
                                    提还:
                                </div>
                                <div class="flex4 infovalue">
                                    <span>{{detailinfo.placeofget||'暂无'}} / {{detailinfo.placeofback||'暂无'}}</span>
                                </div>
                            </div>
                            <div class="info-item flexbox">
                                <div class="flex_item infotitle">
                                    装卸:
                                </div>
                                <div class="flex4 infovalue">
                                    <span>{{detailinfo.placeofloadarea}} - {{detailinfo.placeofload}}</span>
                                </div>
                            </div>
                            <div class="info-item flexbox">
                                <div class="flex_item infotitle">
                                    柜号:
                                </div>
                                <div class="flex4 infovalue">
                                    <span>{{detailinfo.containerNo||'暂无'}} / {{detailinfo.size}} 柜重: {{detailinfo.ctnrWeight||'暂无'}}</span>
                                </div>
                            </div>
                            <div class="info-item flexbox">
                                <div class="flex_item infotitle">
                                    司机:
                                </div>
                                <div class="flex4 infovalue">
                                    <span>{{detailinfo.truck||'暂无'}} / {{detailinfo.Trucker||'暂无'}} / {{detailinfo.TruckMobile||'暂无'}}</span>
                                </div>
                            </div>
							<div class="info-item flexbox">
							    <div class="flex_item infotitle">
							        状态:
							    </div>
							    <div class="flex4 infovalue">
							        <span>{{detailinfo.state}}</span>
							    </div>
							</div>
                            <div class="info-item flexbox">
                                <div class="flex_item infotitle">
                                    货重:
                                </div>
                                <div class="flex4 infovalue">
                                    <span>{{detailinfo.weight}}</span>
                                </div>
                            </div>
							<template v-if="detailinfo.address">
								<div class="addresswrap" v-for="(item,index) in detailinfo.address" :key="index">
									<div class="info-item flexbox">
									    <div class="flex_item infotitle">
									        地址{{index+1}}:
									    </div>
									    <div class="flex4 infovalue">
									        <span>{{item.FactoryAddress}}</span>
									    </div>
									</div>
									<div class="info-item flexbox">
									    <div class="flex_item infotitle">
									        联系人{{index+1}}:
									    </div>
									    <div class="flex4 infovalue">
									        <span>{{item.contact}}{{item.mobile?(' / '+item.mobile):''}}{{item.Tel?(' / '+item.Tel):''}}</span>
									    </div>
									</div>
									<div class="info-item flexbox">
									    <div class="flex_item infotitle">
									        工厂名{{index+1}}:
									    </div>
									    <div class="flex4 infovalue">
									        <span>{{item.FactoryName}}</span>
									    </div>
									</div>
									<div class="info-item flexbox">
									    <div class="flex_item infotitle">
									        备注{{index+1}}:
									    </div>
									    <div class="flex4 infovalue">
									        <span>{{item.remarks||'无'}}</span>
									    </div>
									</div>
								</div class="addresswrap">
								
							</template>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="费用信息">
                    <detailfee :t_ctnrId="t_ctnrId"></detailfee>
                </van-tab>
                <van-tab title="出车费信息" v-if="sType==3">
                    <feedetail :t_ctnrId="t_ctnrId" :feeid="feeid" @sett_ctnrId="changet_ctnrId"></feedetail>
                </van-tab>
                <van-tab title="位置信息">
                    <template v-if="detailinfo.AllowViewGps==0">
                        <van-empty :description="tipwords" />
                    </template>
                    <template v-else>
                        <template v-if="detailinfo.truck">
                            <location :plate_no="detailinfo.truck"></location>
                        </template>
                        <van-empty v-else description="由于没有车牌信息,无法展示位置信息" />
                    </template>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import pageheader from "@/components/public/pageheader.vue";
import detailfee from "./detail-fee.vue";
import feedetail from "@/views/user/salary.vue";
import location from "../location/location.vue";
import animationminx from "@/mixins/animationminx.js";
import { mapState,mapGetters } from "vuex";
import vname from "@/views/user/vconsole.vue";
export default {
    name: "transdetail",
    components: {
        pageheader,
        detailfee,
		vname,
        feedetail,
        location
    },
    mixins: [animationminx],
    data() {
        return {
            active:0,
            t_ctnrId:null,
            detailinfo:{},
            feeid:null,
            tipwords:'抱歉,该车辆为我司外调车辆,暂无GPS数据!!! 如您有任何问题,敬请致电我司操作电话: 0755 - 2664 6158'
        }
    },
	computed:{
	    ...mapState({
	        openid: state=>state.user.token,
			account: state=>state.user.account
	    }),
        ...mapGetters({
            "sType":'user/sType'
        }),
	},
    created() {
        var t_ctnrId = this.$route.query.t_ctnrId;
        var feeid = this.$route.query.feeid;
        if(t_ctnrId)
        {
        	if(!this.openid)
        	{
        		this.$router.push({
        			path:'/login?redirect=transdetail_tctnrId_'+t_ctnrId
        		})
        		return;
        	}else{
				var _this=this;
				var loading = this.$toast.loading({
				  duration:60000,
				  message: '加载中...',
				  forbidClick: true,
				  loadingType: 'spinner'
				});
				this.axios.get('/home/getUserInfo').then((res)=>{
				    loading.clear();
				    if(res.errno==0)
				    {
						var account = res.data;
				        _this.$store.commit('user/setAccount',account);
						_this.t_ctnrId=t_ctnrId;
						_this.getdetailinfo();
				    }else{
					   _this.$toast('当前账户尚未绑定,即将进行绑定');
					   setTimeout(function(){
						   _this.$router.push({
								path:'/login?redirect=transdetail_tctnrId_'+t_ctnrId
						   })
					   },1000)
				    }
				}).catch((err)=>{
				    loading.clear();
				    _this.$toast.fail('获取数据失败');
				})
			}
        }else if(feeid){
            if(!this.openid)
            {
            	this.$router.push({
            		path:'/login?redirect=transdetail_feeid_'+t_ctnrId
            	})
            	return;
            }else{
				var _this=this;
				var loading = this.$toast.loading({
				  duration:60000,
				  message: '加载中...',
				  forbidClick: true,
				  loadingType: 'spinner'
				});
				this.axios.get('/home/getUserInfo').then((res)=>{
				    loading.clear();
				    if(res.errno==0)
				    {
						var account = res.data;
				        _this.$store.commit('user/setAccount',account);
						_this.feeid=feeid;
						_this.active=2;
				    }else{
				       _this.$toast('当前账户尚未绑定,即将进行绑定');
				       setTimeout(function(){
						   _this.$router.push({
								path:'/login?redirect=transdetail_tctnrId_'+t_ctnrId
						   })
				       },1000)
				    }
				}).catch((err)=>{
				    loading.clear();
				    _this.$toast.fail('获取数据失败');
				})
			}
        }else{
        	this.$toast('参数异常,未能找到单据id');
        }
    },
    methods:{
        goback:function(){
            this.$router.go(-1);
        },
        ontabClick:function(index,name){
            if(name=='位置信息')
            {
                this.axios.post('home/addLogs',{plate_no:this.detailinfo.truck}).then((res)=>{
                    
                }).catch(err=>{
                    
                })
            }
        },
        getdetailinfo:function(){
            var _this=this;
            var loading = this.$toast.loading({
              duration:60000,
              message: '加载中...',
              forbidClick: true,
              loadingType: 'spinner'
            });
            this.axios.get('/home/getTransDetail',{t_ctnrId:this.t_ctnrId}).then((res)=>{
                loading.clear();
                if(res.errno==0)
                {
                    var data= res.data;
                    var length = data.length;
                    if(length)
                    {
                        _this.detailinfo=data[0];
                    }else{
                        _this.$toast.fail('暂无详情数据');
                    }
                }else{
                    _this.$toast.fail(res.errmsg);
                }
            }).catch((err)=>{
                loading.clear();
                _this.$toast.fail('获取数据失败');
            })
        },
        changet_ctnrId:function(res){
            this.t_ctnrId=res;
            this.getdetailinfo();
        }
    },
    mounted:function(){
        
    }
};
</script>

<style lang="less">
.transdetail{
    width: 100%;
    height: auto;
    .nav_slot{
        font-size: 0px;
        color: #333;
        line-height: 1.4;
        span{
            font-size: .32rem;
            display: inline-block;
            vertical-align: middle;
            margin-top: 1px;
        }
        .vanicon{
            font-size: .46rem;
            vertical-align: middle;
            display: inline-block;
            color: #777;
        }
    }
    .detailinfo{
        width: 100%;
        height: auto;
        .info-wrap{
            padding: .4rem .5rem;
            .info-item{
                width: 100%;
                text-align: left;
                font-size: 0px;
                opacity: hidden;
                margin-bottom: .2rem;
                border-bottom: 1px dotted #eee;
                padding: .2rem 0;
                .infotitle{
                    font-size: .36rem;
                    color: #666;
                    text-indent: .2rem;
                }
                .infovalue{
                    text-align: right;
                    width: 100%;
                    span{
                        color: #666;
                        font-size: .34rem;
                        margin-right: .2rem;
                        display: inline-block;
                        vertical-align: middle;
                        text-align: justify;
                        max-width: 100%;
                        line-height: 1.4;
                    }
                    .red{
                        color: #FF464E;
                    }
                    .green{
                        color: #2AB577;
                    }
                }
            }
			.addresswrap{
				width: 100%;
				height: auto;
				border: 2px dashed #131426;
				background-color: #f5f8fa;
				margin-top: 20px;
				.info-item{
					border-bottom: 1px solid #ccc;
					color: #333;
				}
			}
        }
    }
}
</style>